<template>
  <div class="list">
    <div class="list-container">
      <div class="table-content">
        <div class="header">
          <div class="line">线路</div>
          <div class="content">故障内容</div>
        </div>
        <div class="part">
          <div class="line">创建站线路</div>
          <div class="content">
            创建站：XX三相过流动作，开关跳闸，重合不成功，停电台区XX个，无重要用户。
          </div>
          <div class="part-item">
            <div
              class="item"
              :class="{ 'active-item': chuang == '创1石沙' }"
              @click="handleChangeChuang('创1石沙')"
            >
              创1石沙
            </div>
          </div>
          <div class="part-item">
            <div
              class="item"
              :class="{ 'active-item': chuang == '创3造纸' }"
              @click="handleChangeChuang('创3造纸')"
            >
              创3造纸
            </div>
          </div>
          <div class="part-item">
            <div
              class="item"
              :class="{ 'active-item': chuang == '创4潘石' }"
              @click="handleChangeChuang('创4潘石')"
            >
              创4潘石
            </div>
          </div>
          <div class="part-item">
            <div
              class="item"
              :class="{ 'active-item': chuang == '创6新潘' }"
              @click="handleChangeChuang('创6新潘')"
            >
              创6新潘
            </div>
          </div>
          <div class="part-item">
            <div
              class="item"
              :class="{ 'active-item': chuang == '创8新石' }"
              @click="handleChangeChuang('创8新石')"
            >
              创8新石
            </div>
          </div>
        </div>
        <div class="part">
          <div class="line">园沙站线路</div>
          <div class="content">
            圆沙站：XXAB相过流动作，开关跳闸，重合不成功。停电台区XX个，无重要用户
          </div>
          <div class="part-item">
            <div
              class="item"
              :class="{ 'active-item': yuan == '园2庆丰' }"
              @click="handleChangeYuan('园2庆丰')"
            >
              园2庆丰
            </div>
          </div>
          <div class="part-item">
            <div
              class="item"
              :class="{ 'active-item': yuan == '园7园沙泵闸甲' }"
              @click="handleChangeYuan('园7园沙泵闸甲')"
            >
              园7园沙泵闸甲
            </div>
          </div>
          <div class="part-item">
            <div
              class="item"
              :class="{ 'active-item': yuan == '园8园沙泵闸乙' }"
              @click="handleChangeYuan('园8园沙泵闸乙')"
            >
              园8园沙泵闸乙
            </div>
          </div>
          <div class="part-item">
            <div
              class="item"
              :class="{ 'active-item': yuan == '园10机械' }"
              @click="handleChangeYuan('园10机械')"
            >
              园10机械
            </div>
          </div>
          <div class="part-item"></div>
        </div>
      </div>
      <div class="btns">
        <div class="confirm" @click="handleConfirm"></div>
        <div class="back" @click="handleBack"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { commitLineData } from "@/api/api.js";
const router = useRouter();
const route = useRoute();
const type = ref(route.query.type);
const chuang = ref();
const yuan = ref();
const handleChangeChuang = (name) => {
  chuang.value = name;
};
const handleChangeYuan = (name) => {
  yuan.value = name;
};
const handleConfirm = () => {
  if (chuang.value && yuan.value) {
    commitLineDataFn();
  }
};
const handleBack = () => {
  router.go(-1);
};
const commitLineDataFn = async () => {
  const data = await commitLineData({
    firstLine: chuang.value,
    secondLine: yuan.value,
  });
  console.log(data, "提交线路数据");
  if (data.code === 200) {
    router.push({
      path: "info",
      query: {
        type: type.value,
        chuang: chuang.value,
        yuan: yuan.value,
      },
    });
  }
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.list {
  width: 1920px;
  height: 1080px;
  position: relative;
  .list-container {
    width: 1726px;
    height: 847px;
    background: url(./assets/beijing02.png) no-repeat top center / 100%;
    position: absolute;
    left: 51%;
    top: 52%;
    transform: translate(-50%, -50%);
    padding: 60px 40px 0 50px;
    .table-content {
      width: 1600px;
      height: 80%;
      border: 2px solid #14324b;
      background-color: #14324b;
      .part {
        width: 100%;
        display: flex;
        align-items: center;
        height: calc((100% - 60px) / 2);
        font-size: 20px;
        color: #9fbedd;
        .line {
          width: 230px;
        }
        .content {
          width: 550px;
          padding: 0 20px;
        }
        .part-item {
          flex: 1;
          cursor: pointer;
          .item {
            padding: 5px 10px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 45px;
            box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
            &.active-item {
              color: rgba(236, 153, 50, 1);
              background: rgba(236, 153, 50, 0.5);
              box-shadow: inset 0 0 10px rgba(236, 153, 50, 0.5);
            }
          }
        }
        .line,
        .content,
        .part-item {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          border-right: 1px solid #01162a;
          border-bottom: 1px solid #01162a;
        }
      }
      .header {
        width: 100%;
        display: flex;
        align-items: center;
        background-color: rgba(4, 18, 32, 0.6);
        color: #13c3e2;
        .line,
        .content {
          height: 60px;
          line-height: 60px;
          font-size: 20px;
          text-align: center;
        }
        .line {
          width: 230px;
        }
        .content {
          width: 550px;
        }
      }
    }
  }
  .btns {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 45px;
    display: flex;
    justify-content: center;
    gap: 50px;
    .confirm,
    .back {
      width: 210px;
      height: 75px;
      cursor: pointer;
    }
    .confirm {
      background: url(./assets/anniu01.png) no-repeat top center / 100%;
    }
    .back {
      background: url(./assets/anniu02.png) no-repeat top center / 100%;
    }
  }
}
</style>
